<template>
  <div class="picker-container">
    <van-field
      :label="label"
      :border="border"
      :required="required"
      :value-class="valueClass"
      :focus="focus"
      input-class="picker-input__field"
      :error-message="errorMessage"
      :error="error"
    >
      <view
        slot="button"
        class="picker-input"
      >
        <picker
          mode="date"
          @change="bindDateChange"
          @cancel="bindDateCancel"
          :value="date"
          :start="start"
          :end="end"
          :fields="fields"
          ref="others"
        >
          <slot name="others">
            <view
              class="picker-input__value"
              v-if="date"
            > {{date}} </view>
            <view
              class="picker-input__placeholder"
              :class="[{'picker-input__error': error}]"
              v-else
            > {{placeholder}} </view>
          </slot>
        </picker>
      </view>
    </van-field>
  </div>
</template>

<script>
// import Vue from 'vue'
export default {
  props: {
    label: {
      type: String,
      default: '日期'
    },
    // 当前日期
    value: {
      type: String,
      default: ''
    },
    // 最小日期
    start: {
      type: String,
      default: ''
    },
    // 最大日期
    end: {
      type: String,
      default: ''
    },
    // 日期最小层级
    fields: {
      type: String,
      default: 'day'
    },
    // 日期最小层级
    placeholder: {
      type: String,
      default: '请选择日期'
    },
    titleWidth: {
      type: String
    },
    valueClass: {
      type: String
    },
    focus: {
      type: Boolean,
      default: false
    },
    errorMessage: {
      type: String,
      default: ''
    },
    error: {
      type: Boolean,
      default: false
    },
    required: Boolean,
    border: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      date: ''
    }
  },
  mounted () {
    this.date = this.value
    console.log(this.date)
  },

  onLoad (option) {
    console.log('_____________onLoad')
  },
  created () {
    console.log('_____________created')
  },

  methods: {
    notice () {
      this.$emit('change', this.date)
    },
    bindDateChange (e) {
      console.log('picker发送选择改变，携带值为', e.mp.detail.value)
      this.date = e.mp.detail.value
      this.notice()
    },
    bindDateCancel (e) {
      // this.notice()
    }
  }
}
</script>

<style lang="less">
.picker-input {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: UICTFontTextStyleBody;
  &__field {
    width: 0 !important;
  }
  &__placeholder {
    color: #c8c9cc;
  }
  &__error {
    color: #ee0a24;
  }
}
.van-field__body {
  justify-content: flex-end;
}
</style>